<template>
<view class="product-bg">
        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration" @change="change">
            <block v-for="(item, index) in imgUrls" :key="index"> 
                   <swiper-item>
                <image :src="item" class="slide-image"></image>
              </swiper-item>
            </block>
        </swiper>
        <view class="pages">{{currents}}/{{imgUrls.length || 1}}</view>
    </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      indicatorDots: false,
      circular: true,
      autoplay: false,
      interval: 3000,
      duration: 500,
      currents: "1"
    };
  },

  components: {},
  props: {
    imgUrls: {
      type: Object,
      default: () => []
    }
  },
  beforeMount: function () {},
  methods: {
    change: function (e) {
      this.setData({
        currents: e.detail.current + 1
      });
    }
  }
};
</script>
<style>
.product-bg{width:100%;height:750rpx;position:relative;}
.product-bg swiper{width:100%;height:100%;position:relative;}
.product-bg .slide-image{width:100%;height:100%;}
.product-bg .pages{position:absolute;background-color:#fff;height:34rpx;padding:0 10rpx;border-radius:3rpx;right:30rpx;bottom:30rpx;line-height:34rpx;font-size:24rpx;color:#050505;}
</style>